<template>
    <div class="Order">
        <h1>订单管理</h1>
        <table class="t-table">
            <thead>
            <tr>
                <th v-for="(word,key) in cols" :key="key" v-text="word"/>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in rows" :key="item">
                <td v-for="key in Object.keys(cols)" :key="key"
                    v-text="item[key] && item[key].length > 12 ? item[key].substr(0,12) + '...' : item[key]"/>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td :colspan="Object.keys(cols).length">
                    <button @click="next(page - 1)" :disabled="page === 1">上一页</button>
                    <label>{{page}}/{{totalPage}}</label>
                    <button @click="next(page + 1)" :disabled="page === totalPage">下一页</button>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
</template>

<script>
    export default {
        props: {},
        data() {
            return {
                cols: {book_index: '索取号', book_name: '图书名称', book_publish: '出版社', book_editor: '作者', status: '订单状态'},
                rows: [],
                page: 1,
                totalPage: 1
            }
        },
        created() {
            this.next(1);
        },
        methods: {
            // 换页
            next(val) {
                if (val <= 0 || val > this.totalPage)
                    return;
                this.page = val;
                this.$axios.get('/order/self', {params: {page: val}})
                    .then(res => {
                        if (res.data.code === 200) {
                            let content = res.data.content;
                            this.page = parseInt(content.page);
                            this.totalPage = parseInt(content.totalPage);
                            this.rows = content.rows;
                        } else if (res.data.code === 400) {
                            window.alert(res.data.content);
                        }
                    })
            }

        }
    };
</script>
<style scoped lang="scss">
    @import "Order";
</style>
